<script setup lang="ts">
import type { DataField } from '../DataField'
import { Filter } from '@element-plus/icons-vue'
import { ref } from 'vue'

defineProps<{
  fields: DataField[]
}>()

const visible = ref(false)
</script>

<template>
  <el-popover v-model:visible="visible">
    <template #reference>
      <el-button :icon="Filter" circle :class="visible ? 'active' : ''" />
    </template>
    <div class="p-1">
      <div v-for="c in fields" :key="c.title">
        <el-checkbox
          v-if="typeof c.show === 'boolean' ? c.show : true "
          v-model="c.columnFilter" :label="c.title" :checked="c.columnFilter === undefined ? true : c.columnFilter"
          :disabled="c.columnType === 'KEY' || c.columnType === 'MAIN'"
        />
      </div>
    </div>
  </el-popover>
</template>

<style scoped>
.el-button.active {
  --at-apply: bg-active;
}
</style>
